<template>
	<div id="loginBox">
		<div class="shell">
			<div class="container a-container" id="a-container">
				<form action="" method="" class="form" id="a-form">
					<h2 class="form_title title">创建账号</h2>
					<div class="form_icons">
						<i class="iconfont  icon-QQ "></i>
						<i class="iconfont  icon-weixin "></i>
						<i class="iconfont  icon-bilibili-line "></i>
					</div>
					<span class="form_span">选择注册方式或电子邮箱注册</span>
					<input type="text" class="form-input" placeholder="Name">
					<input type="text" class="form-input" placeholder="Email">
					<input type="text" class="form-input" placeholder="PWD">
					<button class="form_button button submit">CREATE</button>
				</form>
			</div>

			<div class="container b-container" id="b-container">
				<form action="" method="" class="form" id="b-form">
					<h2 class="form_title title">登录账号</h2>
					<div class="form_icons">
						<i class="iconfont  icon-QQ "></i>
						<i class="iconfont  icon-weixin "></i>
						<i class="iconfont  icon-bilibili-line "></i>
					</div>
					<span class="form_span">选择登录方式或电子邮箱登录</span>
					<input type="text" class="form-input" placeholder="Email" v-model="loginUser.name">
					<input type="text" class="form-input" placeholder="PWD" v-model="loginUser.pwd">
					<a href="" class="form_link">忘记密码？</a>
					<button class="form-button button submit" @click="Login()">LOGIN IN</button>
				</form>
			</div>

			<div class="switch" id="switch-ctn">
				<div class="switch_circle"></div>
				<div class="switch_circle switch_circle-t"></div>

				<div class="switch_container is_hidden" id="switch-c1">
					<h2 class="switch_title title" style="letter-spacing: 0;">Hello Friend!</h2>
					<p class="switch_description description">已有账号，去登陆</p>
					<button class="switch_button button switch-btn">去登陆</button>
				</div>

				<div class="switch_container" id="switch-c2">
					<h2 class="switch_title title" style="letter-spacing: 0;">Welcome Back!</h2>
					<p class="switch_description description">没有账号？去注册账号啊</p>
					<button class="switch_button button switch-btn">去注册</button>
				</div>

			</div>
		</div>
		<div class="bubbles" id="bubbles">
		</div>
	</div>
</template>
<script setup>
	import router from '@/router';
	import {
		reactive,
		computed,
		ref
	} from 'vue'
	const count = ref(0)
	const loginUser = reactive({
		name: '',
		pwd: ''
	})
	//处理默认事件
	function getButtons(e) {
		e.preventDefault();
	}

	// 登录请求方法
	function Login() {
		if (loginUser.name == 'xiaoer' && loginUser.pwd == "123456") {
			alert("登录成功");
			router.push('/home')
		} else {
			alert("登录失败")
		}

	}

	function changeForm(e) {
		let switchCtn = document.querySelector("#switch-ctn");
		let switchC1 = document.querySelector("#switch-c1");
		let switchC2 = document.querySelector("#switch-c2");
		let switchCircle = document.querySelectorAll(".switch_circle");
		let aContainer = document.querySelector("#a-container");
		let bContainer = document.querySelector("#b-container");

		switchCtn.classList.add("is-gx");
		setTimeout(function() {
			switchCtn.classList.remove("is-gx");
		}, 1500);
		switchCtn.classList.toggle("is-txr");
		switchCircle[0].classList.toggle("is-txr");
		switchCircle[1].classList.toggle("is-txr");

		switchC1.classList.toggle("is_hidden");
		switchC2.classList.toggle("is_hidden");
		aContainer.classList.toggle("is-txl");
		bContainer.classList.toggle("is-txl");
		aContainer.classList.toggle("is-z");
	}

	function shell() {
		let allButtons = document.querySelectorAll(".submit");
		let switchBtn = document.querySelectorAll(".switch-btn");
		for (var i = 0; i < allButtons.length; i++) {
			allButtons[i].addEventListener("click", getButtons);
		}
		for (var i = 0; i < switchBtn.length; i++) {
			switchBtn[i].addEventListener("click", changeForm);
		}

		for (var i = 0; i < 45; i++) {
			// "<span style=></span>"
			const aa = getRndInteger(10, 30);
			var sp = document.createElement('span');
			sp.style = "--i: " + aa + " ";
			document.getElementById("bubbles").appendChild(sp);
		}
	}
	//获取max - min 之间的随机数
	function getRndInteger(min, max) {
		return Math.floor(Math.random() * (max - min + 1)) + min;
	};
	// shell();
	window.addEventListener("load", shell);
</script>

<style>
	#loginBox {
		width: 100%;
		height: 100vh;
		position: relative;
		display: flex;
		min-height: 100vh;
		justify-content: center;
		align-items: center;
		font-size: 12px;
		background-color: #ecf0f3;
		color: #a0a5a8;
		overflow: hidden;
	}

	.shell {
		position: relative;
		width: 1000px;
		height: 600px;
		min-width: 1000px;
		min-height: 600px;
		padding: 25px;
		background-color: #ecf0f3;
		box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
		border-radius: 12px;
		overflow: hidden;
		z-index: 2;
	}

	/* 响应式布局 */
	@media (max-width: 1200px) {
		.shell {
			transform: scale(0.7);
		}
	}

	@media (max-width: 1000px) {
		.shell {
			transform: scale(0.6);
		}
	}

	@media (max-width: 800px) {
		.shell {
			transform: scale(0.5);
		}
	}

	@media (max-width: 600px) {
		.shell {
			transform: scale(0.4);
		}
	}

	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		width: 600px;
		height: 100%;
		padding: 25px;
		background-color: #ecf0f3;
		transition: 1.2s;
	}

	.form {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
		height: 100%;
	}

	.iconfont {
		margin: 0 5px;
		border: 2px solid rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		font-size: 25px;
		padding: 3px;
		opacity: 0.5;
		transition: 0.1s;
	}

	.iconfont :hover {
		opacity: 1;
		transition: 0.15s;
		cursor: pointer;
	}

	.form-input {
		width: 350px;
		height: 40px;
		margin: 4px 0;
		padding-left: 25px;
		font-size: 13px;
		letter-spacing: 0.15px;
		border: none;
		outline: none;
		background-color: #ecf0f3;
		transition: 0.2s;
		border-radius: 8px;
		box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9;
	}

	.form-input:focus {
		box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9;
	}

	.form_span {
		margin-top: 30px;
		margin-bottom: 12px;
	}

	.form_link {
		color: #181818;
		font-size: 15px;
		margin-top: 25px;
		border-bottom: 1px solid #a0a5a8;
		line-height: 2;
	}

	.title {
		font-size: 34px;
		font-weight: 700;
		line-height: 3;
		color: #181818;
		letter-spacing: 0.25px;
		/* 	text-align: center; */

	}

	.description {
		font-size: 14px;
		letter-spacing: 0.25px;
		text-align: center;
		line-height: 1.6;
	}

	.button {
		width: 180px;
		height: 50px;
		border-radius: 25px;
		margin-top: 50px;
		font-weight: 700;
		font-size: 14px;
		letter-spacing: 1.15px;
		background-color: #4B70E2;
		color: #f9f9f9;
		box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9;
		border: none;
		outline: none;
	}

	.a-container {
		z-index: 0;
		/* left: calc(100% - 600px); */
		left: 0;
	}

	.b-container {
		z-index: 100;
		/* left: calc(100% - 600px); */
		left: 0;
	}

	.switch {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 0;
		/* left: 0; */
		left: calc(100% - 400px);
		height: 100%;
		width: 400px;
		padding: 50px;
		z-index: 200;
		transition: 1.2s;
		background-color: #ecf0f3;
		overflow: hidden;
		box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #d1d9e6;
	}

	.switch_circle {
		position: absolute;
		width: 500px;
		height: 500px;
		border-radius: 50%;
		background-color: #ecf0f3;
		box-shadow: inset 8px 8px 12px #b8bec7, inset -8px -8px 12px #fff;
		bottom: -60%;
		left: -60%;
		transition: 1.2s;
	}

	.switch_circle-t {
		width: 300px;
		height: 300px;
		top: -30%;
		left: 60%;

	}

	.switch_container {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		padding: 50px 55px;
		transition: 1.25s;
	}

	.switch_button {
		cursor: pointer;
	}

	.switch_button:hover,
	.submit:hover {
		box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
		transform: scale(0.985);
		transition: 0.25s;
	}

	.switch_button:active,
	.switch_button:focus {
		box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9;
		transform: scale(0.985);
		transition: 0.25s;
	}

	.is-txr {
		/* left: calc(100% - 400px); */
		left: 0;
		transition: 1.25s;
		transform-origin: left;
	}

	.is-txl {
		left: calc(100% - 600px);
		transition: 1.25s;
		transform-origin: right;
	}

	.is-z {
		z-index: 200;
		transition: 1.25s;
	}

	.is_hidden {
		/* visibility: hidden; */
		opacity: 0;
		position: absolute;
		transition: 1.25s;
	}

	.is-gx {
		animation: is-gx 1.25s;
	}

	@keyframes .is-gx {

		0%,
		10%,
		100% {
			width: 400px;
		}

		30%,
		50% {
			width: 500px;
		}
	}

	/* 这里是背景流动图的设置 */
	.bubbles {
		display: flex;
		justify-content: space-between;
		position: absolute;
		flex-wrap: wrap;
		width: 100%;
		height: 100vh;
		z-index: 1;
	}

	.bubbles span {
		display: flex;
		width: 80px;
		height: 80px;
		margin: 0 4px;
		border-radius: 112px;
		background: linear-gradient(45deg, #757173, #7a346d);
		box-shadow: 38px -38px 76px #3d1a36,
			-38px 38px 76px #d35abc;
		animation: animate calc(200s / var(--i)) linear infinite;

	}

	.bubbles span:nth-child(even) {
		background: linear-gradient(45deg, #8b8594, #29497c);
		box-shadow: 0 0 10px #4fc3dc44,
			0 0 50px #4fc3dc,
			0 0 100px #4fc3dc;

	}

	@keyframes animate {
		0% {
			transform: translateY(100vh) scale(0);
		}

		100% {
			transform: translateY(-10vh) scale(1);
		}
	}
</style>
